<template>
  <div class="login">
    <div class="logo"></div>
    <div class="box">
      <div class="title">
        <span>xxx系统</span>
      </div>
      <el-form :model="user_obj" label-width="65px" class="demo-ruleForm form_box">
        <el-form-item label="账号">
          <el-input  v-model="user_obj.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input ref="passInput" v-model="user_obj.password" type="password"  clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roleData:'',
      radio: [],
      user_obj: {
        userName: "",
        password: "",
      },
      rolea:false,
    }
  },
  computed: {
    loginBtn() {
      return !this.user_obj.role || !this.user_obj.password || !this.user_obj.userName
    }
  },
  mounted() {
    this.user_obj.password = "";
    this.user_obj.userName = "";
    this.$nextTick(function () {
      })
  }, 
  methods: {
    henaldeNameEnter() { //用户名enter
      if(this.user_obj.userName) {
        this.$refs.passInput.focus();
      }
    },
    submitForm() {
      this.$router.push("/home");
    },
  }
}
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  min-height: 540px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./assets/image/bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  /* padding-left: 25%; */
  position: relative;
}
.logo{
  position: absolute;
  top:50px;
  left: 155px;
}
.el-radio-group {
  margin-right: 30px;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 30%;
  height: 50%;
  /* border: 1px solid #fff; */
  background-color: #de7bdd24;
}
.title {
  width: 100%;
  height: 80px;
  line-height: 60px;
  top: 0;
  left: 0;
  font-size: 30px;
  text-align: center;
  background-size: 100% 100%;
  color:rgb(255, 255, 255);
}
.form_box {
  height: 310px;
  padding: 20px 65px 0px 50px;
  background-size: 100% 100%;
}
.input_width {
  width: 400px;
}
@-webkit-keyframes masked-animation {
	0% {
	background-position:0 0;
}
100% {
	background-position:-100% 0;
}
}
.box /deep/.el-form-item__content {
  margin-left: 0 !important;
}
.box /deep/ .el-button.el-button--primary {
  width: 100% !important;
}
.box /deep/ .el-form-item__label {
  font-size: 16px;
  font-weight: 700;
  color:rgb(255, 255, 255);
	background-size:200% 100%;
}
.login_twice /deep/ .el-dialog__body{
  padding: 20px 20px 0 20px;
}
.login_twice /deep/ .el-dialog__footer {
  padding: 10px 20px 10px;
}
.login_twice /deep/ .el-dialog__header {
  background: #d7e4f7  !important;
}
.input_width_twice {
  width: 240px;
}
</style>